import '@ant-design/compatible/assets/index.css';
import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import {Spin} from 'antd';
import DataForm from './components/DataForm';
import {detailRule,queryRule} from './service';

export default (props: any)=>{
  // common数据
  const [common, setCommon] = useState({});
  // 表单数据
  const [dataFormValues, setDataFormValues] = useState({post_append: {}});
  // 初始化loading
  const [initLoading, setInitLoading] = useState(true);

  const { location } = props;

  const isUpdate: boolean = Boolean(location.query.id);
  const [radioType, setRadioType] = useState<any>()
  const handleChange = (value: any) => {
    setRadioType(value)
  }
  const [nameList, setnameList] = useState<any>([]);
  const handleName = (val)=>{
    setnameList(val)
} 
 console.log(isUpdate)
  useEffect(() => {
    if(isUpdate){
      detailRule(location.query.id).then(res=>{
        setCommon(res.data.common);
        setDataFormValues(res.data.detail);
        setRadioType(res.data.detail?.type);
        setnameList(res.data.detail?.template_decode)
        setInitLoading(false);
      });
    }else{
      queryRule().then(res=>{
        setCommon(res.data.common);
        setInitLoading(false);
      })
    }
  }, []);

  return <PageHeaderWrapper>
    <Spin spinning={initLoading}>
      {initLoading && <div style={{height: '500px',backgroundColor: '#fff'}} />}
      {!initLoading && <DataForm 
                          isUpdate={isUpdate}
                          radioType={radioType}
                          handleName={handleName}
                            nameList={nameList}
                          handleChange={handleChange}
                          dataFormValues={dataFormValues}
                          common={common}/>}
    </Spin>
  </PageHeaderWrapper>
};
